<template>
  <div style="display: inline-block; margin-left: 15px">
    <el-button type="primary" @click="showDialogFn">代码导入</el-button>
    <HfDrawer title="导入Json" ref="createCodeDioRef">
      <template #content>
        <div class="drawerBody">
          <div id="coder"></div>
        </div>
      </template>
      <template #confirm>
        <el-button @click="importJSONed" type="primary">导入</el-button>
      </template>
    </HfDrawer>
  </div>
</template>

<script lang="ts" setup>
import { basicSetup } from "codemirror";
import { EditorView, keymap } from "@codemirror/view";
import { indentWithTab } from "@codemirror/commands";
import { oneDark } from "@codemirror/theme-one-dark";
import { json } from "@codemirror/lang-json";
import { importJSON } from "@/views/coderCreate/index";
const createCodeDioRef = ref();
let edit = ref();
function initCodeContent() {
  nextTick(() => {
    edit.value = new EditorView({
      doc: "",
      extensions: [basicSetup, oneDark, keymap.of([indentWithTab]), json()],
      parent: document.querySelector("#coder") as Element
    });
  });
}
function showDialogFn() {
  createCodeDioRef.value.compontOpen = true;
  initCodeContent();
}
function importJSONed() {
  importJSON(edit.value.viewState.state.doc.toString());
  createCodeDioRef.value.compontOpen = false;
}
</script>

<style scoped>
.drawerBody {
  height: 100%;
  #coder {
    margin-top: 10px;
  }
}
</style>
